import { Component } from "react";
import "../assets/css/home.css";

class Home extends Component {
  constructor() {
    super();
    this.state = {
      arr: [
        {
          id: 1,
          name: "jack",
          text: "PHP是世界上最好的语言",
        },
        {
          id: 2,
          name: "rose",
          text: "人生苦短，我用python",
        },
        {
          id: 3,
          name: "tom",
          text: "任何能用js来实现的功能终将使用js来实现",
        },
      ],
    };
  }
  //  提交评论
  submit() {
    let inp = document.querySelectorAll("input");
    let obj = {
      id: this.state.arr[this.state.arr.length - 1].id + 1,
      name: inp[0].value,
      text: inp[1].value,
    };
    console.log(obj);
    let res = this.state.arr;
    res.push(obj);
    this.setState(
      {
        arr: res,
      },
      () => {
        console.log(res);
      }
    );
    inp[0].value = "";
    inp[1].value = "";
  }
  //  删除评论
  del(i) {
    //   console.log(i);
    let arr1 = this.state.arr;
    console.log(arr1);
    this.state.arr.splice(i, 1);
    this.setState({
      arr: arr1,
    });
  }
  render() {
    const { arr } = this.state;
    return (
      <div className="wrap">
        <h1>留言框</h1>
        <div className="box">
          <input className="inp" type="text" placeholder="请输入昵称" />
          <br />
          <input className="inp1" type="text" placeholder="请输入留言内容" />
          <br />
          <button onClick={() => this.submit()}>提交留言</button>
        </div>

        <div className="foot">
          <ul>
            {arr.map((item, i) => {
              return (
                <li key={item.id}>
                  <span onClick={() => this.del(i)}>X</span>
                  <p>昵称:{item.name}</p>
                  <p>留言:{item.text}</p>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}

export default Home;
